<%--
  Created by IntelliJ IDEA.
  User: 25131
  Date: 2021/11/5
  Time: 19:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树懒商城收银台</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/ready_pay.css">

    <script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.min.js" rel="stylesheet"></script>

</head>
<body>

<%--<%
    String str = request.getParameter("newMyOrderId");
    int nn = Integer.parseInt(str);
%>

<form id="hh">
    <input type="text" name="hihihi" value="<%=nn %>" id="hihihi" readonly>
</form>--%>

    <!-- 整个页面 -->
    <div data-v-51f7b13e id="indexBlurId">
        <!-- 真个页面的div -->
        <div data-v-b87f26b6 data-v-51f7b13e class="page-inner">
            <!-- 中间盒子 -->
            <div data-v-b87f26b6 class="page-inner-wrap">
                <!-- 顶部log、用户信息、我的订单 -->
                <div data-v-4f5dd75c data-v-51f7b13e class="head-info" data-v-b87f26b6>
                    <!-- 左边 log 样式 -->
                    <div data-v-4f5dd75c class="head-info-left">
                        <a data-v-4f5dd75c href="#none">
                            <!---->
                            <!-- 图片样式 -->
                            <img data-v-4f5dd75c src="" alt="" class="head-info-logo">
                        </a>
                    </div>

                    <!-- 右边登录用户、我的订单 -->
                    <div data-v-4f5dd75c class="head-info-right narmal-info float-right">
                        <!-- 用户信息 -->
                        <span data-v-4f5dd75c>
                            <a data-v-4f5dd75c href="#none" class="narmal-info userNickName"></a>
                            <!-- 中间标志 -->
                            <div data-v-40a0ac98 data-v-4f5dd75c class="base-line">|</div>
                        </span>
                        <!-- 我的订单信息 -->
                        <span data-v-4f5dd75c>
                            <a data-v-4f5dd75c href="${pageContext.request.contextPath}/customer/login.jsp" target="_blank" class="narmal-info order-href">我的订单</a>
<%--                            <div data-v-40a0ac98 data-v-4f5dd75c class="base-line">|</div>--%>
                        </span>
                        <!-- 还有一个a标签 使用帮助 -->
                    </div>

                </div>

                <!-- 下面直到去支付 -->
                <div data-v-51f7b13e data-v-b87f26b6 class="index-content">
                    <div data-v-51f7b13e data-v-b87f26b6>
                        <div data-v-78b9addd data-v-51f7b13e data-v-b87f26b6>
                            <!-- 上面的订单过期倒计时，订单编号等信息 -->
                            <div data-v-78b9addd class="order-info float-clear">
                                <!-- 左边的 倒计时、提示信息 -->
                                <div data-v-78b9addd class="float-left order-info-left float-clear">
                                    <!-- 放图像、美化 -->
                                    <div data-v-78b9addd class="float-left order-info-left-qrblock">
                                        <img data-v-78b9addd src="" alt="" class="order-info-left-qr">
                                        <!-- 无用的盒子 -->
                                        <div data-v-78b9addd class="order-info-left-qrcircle">
                                            <span data-v-78b9addd></span>
                                        </div>
                                    </div>
                                    <!-- 订单的详细信息 -->
                                    <div data-v-78b9addd class="float-left order-info-left-detail">
                                        <!-- 倒计时、提示信息 -->
                                        <div data-v-78b9addd class="order-info-left-detail-item-title">
                                            订单提交成功，请尽快支付！
                                            <span data-v-78b9addd>订单号：${orderNo}</span>
                                        </div>
                                        <!-- 下面的显示信息 -->
                                        <div data-v-78b9addd>
                                            <span data-v-78b9addd class="duogezitiyangshi">
                                                推荐使用支付宝扫码支付
                                                <div data-v-40a0ac98 data-v-78b9addd class="base-line">|</div>
                                            </span>

                                            <!-- 倒计时 -->
                                            <span data-v-78b9addd class="duogezitiyangshi" id="daojishiguidingjinxing" style="display: inline-block;">
                                                请您在
                                                <span data-v-78b9addd class="order-count-down">
                                                    <span data-v-78b9addd id="daojishi"></span>
                                                    <%--<span data-v-78b9addd>0时</span>
                                                    <span data-v-78b9addd>0分</span>
                                                    <span data-v-78b9addd>0秒</span>--%>
                                                </span>
                                                内完成支付，否则订单会自动取消！
                                            </span>

                                            <!-- 倒计时结束后，更改样式 -->
                                            <span data-v-78b9addd class="duogezitiyangshi" id="daojishiguidingjieshu" style="display: none;">
                                                订单已超时被取消，请重新下单进行支付
                                            </span>

                                        </div>

                                        <!-- 盒子有样式，但没有内容 -->
                                        <div data-v-78b9addd>
                                            <!---->
                                            <!---->
                                        </div>

                                    </div>
                                </div>
                                <!-- 右边的价格订单详情信息 -->
                                <div data-v-78b9addd class="float-right order-info-right order-info-right">
                                    <div data-v-78b9addd>
                                        <em data-v-78b9addd class="duogezitiyangshi">应付金额</em>
                                        <strong data-v-78b9addd class="pay-price">${orderPrice}</strong>
                                        <em data-v-78b9addd class="duogezitiyangshi">元</em>
                                    </div>
                                    <!-- 订单详情 点击显示 -->
                                    <div data-v-78b9addd class="order-info-right-btn">
                                        <a data-v-78b9addd href="javascript:;" class="link dingdanxaingqinganniu xianshi">
                                            订单详情
                                            <span data-v-78b9addd class="icons icons-jiantou-down"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- 订单详情信息 -->
                            <div data-v-78b9addd id="orderDetail" class="order-info-detail order-info-fold">
                                <!-- 订单盒子信息 -->
                                <div data-v-78b9addd class="order-info-detail-inner">
                                    <!-- 收货地址信息 -->
                                    <div data-v-78b9addd>
                                        <!-- 收货地址 -->
                                        <span data-v-78b9addd class="xiangxixinxi">收货地址：${address.addressProvince}${address.addressCity}${address.addressTown}${address.addressStreet}${address.detailedAddress}&nbsp;&nbsp;</span>
                                        <span data-v-78b9addd class="xiangxixinxi">收货人：${address.addressName}&nbsp;</span>
                                        <span data-v-78b9addd class="xiangxixinxi">${address.addressTelno}</span>
                                    </div>
                                    <!-- 商品信息描述 -->
                                    <div data-v-78b9addd class="xiangxixinxi">
                                        商品描述：${stringBuffer}
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- 支付信息 -->
                        <div data-v-8070e118 data-v-51f7b13e class="index-channel" data-v-b87f26b6>
                            <div data-v-8070e118 class="index-channel-notice float-clear">
                                <span data-v-8070e118></span>
                                <span data-v-8070e118 class="float-right index-channel-notice-info">

                                </span>
                            </div>

                            <!-- 下方的选择信息 -->
                            <div data-v-7abffc78 data-v-51f7b13e data-v-8070e118>
                                <div data-v-7abffc78>
                                    <!-- 小的选择信息 -->
                                    <div data-v-7abffc78 class="pay-channel-wrapper pay-channel-wrapper-ed pay-channel-wrapper-margin">
                                        <!-- 支付宝支付图标 -->
                                        <span data-v-7abffc78>
                                            <img data-v-7abffc78 src="${pageContext.request.contextPath}/images/zhifubaotubiao.png" class="index-channel-notice-paylogo">
                                            <div class="zhifubaomajizhifu">支付：${orderPrice}元</div>
                                            <div style="height: 80px;"></div>
                                            <div class="mayijinfuwishi">
                                                暂时仅支持蚂蚁金服支付宝支付，其他支付方式正在完善中，敬请期待！
                                            </div>
<%--                                            <span data-v-7abffc78 class="index-channel-notice-paylogo">支付宝支付</span>--%>
                                        </span>
                                        <!-- 支付宝支付 -->
                                        <div data-v-7abffc78>
                                            <div data-v-1e0731fd data-v-7abffc78>
                                                <!-- 先不写 -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 支付按钮 下面div中的tiperror没有加 -->
                                <div data-v-294cbb76 data-v-7abffc78 class="validate">
                                    <div data-v-294cbb76 class="pay-button-wrapper">
                                        <!-- 支付按钮 -->
                                        <div data-v-e1966844 data-v-294cbb76>
                                            <div onclick="btn()" data-v-e1966844 class="base-button pointer-g" id="xiadananniu" style="display: block;">
                                                立即支付
                                            </div>
                                            <a href="${pageContext.request.contextPath}/product/generalMerchandise.jsp" target="_parent">
                                                <div data-v-e1966844 class="base-button pointer-g" id="dingdanchaoshianniu" style="display: none;">返回</div>
                                            </a>
                                            <div data-v-e1966844 class="base-button-error"></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <!-- 树懒商城的提示信息 -->
                        <div data-v-51f7b13e data-v-b87f26b6 class="index-plate-form">
                            <div data-v-5c367922 data-v-51f7b13e class="plate-form" data-v-b87f26b6>
                                <div data-v-5c367922 class="plate-form-item">
                                    <!-- 下面是 中国银联、微信支付 的盒子、没做 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 尾部信息 -->
                <div data-v-51f7b13e data-v-b87f26b6>
                    <div data-v-1d874237 data-v-51f7b13e class="copyright" data-v-b87f26b6>
                        <div data-v-1d874237>
                            <span data-v-1d874237 class="zuixiafangzitiyangshi">©&nbsp;2021 树懒商城版权所有</span>
                            <img data-v-1d874237 src="" alt="" class="copyright-img">
                            <span data-v-1d874237 class="zuixiafangzitiyangshi">由树懒商城提供技术支持</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>

<script>

    function remainingTime() {
        var currentTime = new Date();  // 当前时间

        var orderTime = new Date("${orderDate}");  // 下单时间
        let date = new Date(orderTime.getTime()+10*60*60*1000);

        var timeDifference = date.getTime() - currentTime.getTime() - 23*60*60*1000 - 45*60*1000;

        var displayTime = timeDifference / 1000;
        // var leftHour = displayTime / ( 60 * 60 ) % 24;  // 小时
        // leftHour = Math.floor(leftHour);
        var leftMinute = displayTime / 60 % 60;  // 分钟
        leftMinute = Math.floor(leftMinute);
        var leftSecond = displayTime % 60;  // 秒
        leftSecond = Math.floor(leftSecond);
        var elementById = document.getElementById("daojishi");
        elementById.innerHTML = leftMinute + "分" + leftSecond + "秒";
        // elementById.innerHTML = leftHour + "时" + leftMinute + "分" + leftSecond + "秒";

        if (timeDifference < 0){
            // 把 立即支付 隐藏了，不能支付，显示订单已超时，请重新下单进行支付
            // 隐藏下单按钮
            var obj1 = document.getElementById("xiadananniu");
            obj1.style.display = "none";
            // 把订单已取消显示，同时点击跳转到首页
            var obj2 = document.getElementById("dingdanchaoshianniu");
            obj2.style.display = "block";

            // 倒计时结束，剩余时间提醒 隐藏
            var obj3 = document.getElementById("daojishiguidingjinxing");
            obj3.style.display = "none";
            // 倒计时结束，倒计时的地方改为订单被取消等
            var obj4 = document.getElementById("daojishiguidingjieshu");
            obj4.style.display = "inline-block";
        }
    }

    setInterval(remainingTime,1000);

    // 设置一个变量用来获取点击的次数，刚开始进入页面的时候，订单详情信息没有显示的，变量为单数是隐藏状态、为双数为显示状态
    var onclickCount = 0;

    // 点击订单详情，把订单详情显示出来，出来后点击就把订单详情关闭
    $(".xianshi").click(function () {
        console.log(onclickCount);
        if (onclickCount % 2 == 1){
            // 双数为显示状态
            $("#orderDetail").addClass("order-info-fold");
        }

        if (onclickCount % 2 == 0){
            // 单数为隐藏状态
            $("#orderDetail").removeClass("order-info-fold");
        }
        onclickCount += 1;

    });

    // 点击立即支付，跳转到支付宝进行支付
    function btn(){

        $('#xiadananniu').after(
            '<form id="payForm" action="<%=request.getContextPath() %>/sekillAli/seckillpay" method="post">\n' +
            '    <input type="hidden" name="newSeckillMyOrderId" id="newSeckillMyOrderId" />\n' +
            '    <input id="goPayBtn" type="submit" style="display:none;" value="调用蚂蚁金服支付">\n' +
            '</form>')
        $("#newSeckillMyOrderId").val(${orderId});
        $("#goPayBtn").click();
    }


    $(document).ready(function () {
        // $(".user-info-yes").hide();
        <%--cartUrl="${pageContext.request.contextPath}/myorder/${loginCustomer.custId}";--%>
        <%--orderUrl="${pageContext.request.contextPath}/shopcar/${loginCustomer.custId}";--%>
        $.get("${pageContext.request.contextPath}/cookie/login", null,
            function (result) {
                console.log(JSON.stringify(result));
                if (result.code==200){
                    cartUrl="${pageContext.request.contextPath}/shopcar";
                    orderUrl="${pageContext.request.contextPath}/myorder";

                    $(".user-info-no").hide();
                    $(".user-info-yes").show();
                    $(".userNickName").text(result.data.custNickname);
                    $(".order-href").attr("href",orderUrl);

                    $(".cart-href").attr("href",cartUrl);
                    $(".cart-href").attr("target","_blank");
                }else {
                }



            }, 'json');
    });

</script>


</html>
